<template>
  <el-dialog
    title="发送营销邮件"
    :visible="visible"
    width="950px"
    center
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible">
    <el-form
      ref="form"
      :model="dataList"
      :rules="rules"
      label-width="122px">

      <el-form-item label="EDM模版:" prop="edm_template">
        <el-select
          style="width: 300px"
          clearable
          class="ele-block"
          v-model="dataList.edm_template"
          placeholder="请输入模版">
<!--          <el-option label="测试模板" :value="1"/>-->
          <el-option v-for="(item,index) in edmTemplate" :key="index" :label="item.name"
                     :value="item.id"/>
        </el-select>
        &nbsp;<span style="color: red">选择模板则按模板内容发送,不按自定义内容发送</span>
      </el-form-item>
      <el-form-item label="接收方邮箱:" prop="return_receive_email">
        <el-input clearable style="width: 300px"  v-model="dataList.return_receive_email"/>
        &nbsp;<span style="color: red">邮件统一发送后,客户回信对应的邮箱</span>
      </el-form-item>
      <el-form-item label="自定义标题:" prop="content">
        <el-input clearable  v-model="dataList.title"/>
      </el-form-item>

      <el-form-item label="自定义内容:" prop="content">
        <tinymce-editor v-model="dataList.content"  :init="initEditor" ref="test"/>
      </el-form-item>
      <el-form-item label="定时发送日期:" prop="content">
        <div class="block">
          <el-date-picker
            v-model="dataList.date_time"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions">
          </el-date-picker>
          为空则即时发送
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
        type="primary"
        @click="save"
        :loading="loading">确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import TinymceEditor from '@/components/TinymceEditor';
export default {
  name: "send-email",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  components: {TinymceEditor},
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
      }

    }
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        // edm_template: [
        //   {required: true, message: '请选择EDM模板', trigger: 'blur'}
        // ],
      },
      dataList:{
        edm_template:'',
        title:'',
        date_time:'',
        content:''
      },
      activateId:[],
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      edmTemplate:{},
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '明天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周后',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    };
  },
  mounted() {

  },
  computed:{
    // 初始化富文本
    initEditor() {
      return {
        height: 400,
        branding: false,
        skin_url: '/tinymce/skins/ui/oxide',
        content_css: '/tinymce/skins/content/default/content.css',
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        plugins: 'template code print preview fullscreen paste searchreplace save autosave link autolink image imagetools media table codesample lists advlist hr charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount help',
        toolbar: 'template | fullscreen preview code | undo redo | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | formatselect fontselect fontsizeselect | link image media emoticons charmap anchor pagebreak codesample | ltr rtl | help',
        toolbar_drawer: 'sliding',
        images_upload_handler: (blobInfo, success, error) => {
          let file = blobInfo.blob();
          // 使用axios上传
          const formData = new FormData();
          formData.append('file', file, file.name);
          this.$http.post('/upload/uploadImage', formData).then(res => {
            if (res.data.code == 0) {
              success(res.data.data);
            } else {
              error(res.data.msg);
            }
          }).catch(e => {
            console.error(e);
            error(e.message);
          });
        },
        file_picker_types: 'media',
        file_picker_callback: () => {
        }
      }
    }
  },
  methods:{

    getEdmTemplate(){
      this.$http.get('/activate/getEdmTemplate', this.form).then((res) => {
        this.loading = false;
        if (res.data.code === 0) {
          this.edmTemplate = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },

    setActivateIds(ids)
    {
      this.activateId = ids;
      this.getEdmTemplate();
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid)
        if ( this.dataList.edm_template!='' || this.dataList.content!='') {
          this.loading = true;
          this.$http.post('/activate/sendEmail',
            {ids:this.activateId,
              edm_template:this.dataList.edm_template,
              content:this.dataList.content,
              return_receive_email:this.dataList.return_receive_email,
              date_time:this.dataList.date_time,
              title:this.dataList.title}).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          this.$message.error('请选择模板或自定义内容发送');
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>

::v-deep .ele-block{
  display: inline-block;
}

</style>
